// 滚动条
// ::-webkit-scrollbar{
//   width: 8px;
//   background: #f5f5f5;
// }

// ::-webkit-scrollbar-thumb{
//   width: 8px;
//   background: #c3c3c3;
// }

// ::-moz-selection {
//   background: $link-color;
//   text-shadow: none;
// }

// ::selection {
//   background: $link-color;
//   text-shadow: none;
// }

.browsehappy {
    margin: 0.2em 0 1em;
    color: #000;
    padding: 0.2em 0;
    text-align: center;

    a{
      color: #f0ad4e !important;
      margin: 0 .2em;
    }
}

a,
.btn-link{
  &:hover{
    text-decoration: none;
  }
}

html,
body{
  background-color: $bg;
}

.m-body{
  background-color: $white;

  // 遮住手机侧边栏
  position: relative;
  z-index: 2;

  padding-top: 70px;
  //@include transform(translate(0, 0));
}

.m-wrap{

  // 为了遮住 Sprise
  position: relative;
  z-index: 8;

  // 初始化的背景
  //background-image: url(../images/init-loading.png);
  background-image: url();
  background-position: center 140px;
  background-repeat: no-repeat;
  background-size: 60px;
}

.m-menu-mask,
.m-mask{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 99;
  display: none;
}

.m-menu-mask{
  background: transparent;
}

.m-view{
  overflow: hidden;
  background-color: #fff;
  padding-top: 20px;

}

.root{
  width: 100%;
  overflow-x: hidden;
}



.m-body,
.m-win{
  @include transition(all, .2s, ease-in-out);
}

// 动画
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes rotate{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.sd-card{
  //@include box-shadow(0, 0, 0, rgba(#000, .3));
  border: 1px solid rgba(#000, .1);
  border-radius: 2px;
}


// 开关

.switch .item{
  display: inline-block;
  padding: .4em 10px;
  color: $tone;

  &.active{
    color: $gray;
    cursor: default;
  }

  &:hover:not(.active),
  &:active:not(.active){
    color: $dark-tone;
  }

  &:last-child{
    margin-left: -4px;
    &:before{
      content: "|";
      color: $gray;
      font-size: 1.2em;
      position: relative;
      left: -10px;
      text-shadow: none;
    }
  }
}

.emoji{
  margin-top: -2px;
  height: 1.2em;
  width: auto;
}


// logo

.logo{
  display: inline-block;
  text-indent: -999em;
  background-image: url(../images/logo.png);
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 50px;
}


// 返回顶部
.back-top{
  position: fixed;
  right: .4em;
  bottom: .4em;
  font-size: 1em;
  padding: 4px 8px 2px 6px;
  border-radius: 2px;
  color: $white;
  background-color: $light-gray;
  z-index: 88;
  cursor: pointer;
  &:hover,
  &:active{
    background-color: $gray;
  }
}

// 发送的动画

.glyphicon-refresh.animated{
  -webkit-animation-name: rotate;
  animation-name: rotate;
}

// 用户名，截断
.username{
  @include ellipsis();
}

.username-inline{
  max-width: 100px;
  display: inline-block;
}



// 唤起手机交互菜单的三个点
.bill-btn-dots{
  display: none;
  font-size: 1.8em;
  margin: -4px 0 0;
  color: $gray;
  padding: 6px 10px;
  line-height: 1;
  float: right;
  &:active{
    color: $tone;
  }
}


.error-mod{
  text-align: center;
  color: #999;
}

.dashd-sep{
  
}

.icon.refresh{
  cursor: pointer;
}





@media (max-width: $screen-sm-max) {
  .m-view{
    padding-top: 0;
  }
}


// phone

@media (max-width: $screen-xs-max) {
  
  // 手机模拟fixed顶部
  // 好处多多。。。

  html,
  body,

  // 最外层
  .root,

  // 手机交互弹出菜单
  .m-design,

  // 包括手机侧边栏主视窗
  // 已经删除
  //.m-win,

  // 手机侧边栏
  .m-menu,

  // 主题内容
  .m-body{
    height: 100%;
    overflow: hidden;
  }

  .root{
    background-color: $root-bg;
  }

  .m-body{
    padding-top: 0;
  }

  .m-wrap{
    height: 100%;
  }

  .m-wrap,
  .m-menu{

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

  }

  .m-view{
    padding-top: 108px;
  }


  // 开关
  .switch .item{
    font-size: 1.1em;
    padding: .4em 1em;
    background-color: $light-gray;
    color: $dark-gray;
    border: 1px solid $gray;
    &:active,
    &.active{
      color: $tone;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    }

    &:first-child{
      border-radius: 2px 0 0 2px;
      border-right: none;
    }

    &:last-child{
      border-radius: 0 2px 2px 0;
      &:before{
        display: none;
      }
    }
  }

  .bill-btn-dots{
    display: block;
  }




}


@media (max-width: $screen-xs) {
  .sd-card{
    border: none;
    border-radius: 0px;
  }
  .m-view{
    padding-top: 88px;
  }
}
